<script setup>
import {reactive, toRefs, ref, defineProps, defineEmits, defineExpose} from 'vue'
import {ElMessage} from "element-plus"
import Upload from '~/Upload.vue'
import { GetInfo, Insert, Update } from '@/api/admin.js'
import { useStore } from "vuex";

const store = useStore();

const props = defineProps({
  showDialog: Boolean
})
const {showDialog} = toRefs(props)

const emits = defineEmits(['closeHandle'])
const closeDialog = (hasChange) => {
  emits('closeHandle', hasChange)
}

const pics = ref([])
const title = ref('')

const editForm = ref({})
const init = (adminTitle, id) => {
  title.value = adminTitle;
  if (id) {
    GetInfo(id).then(res => {
      editForm.value = res.data
      pics.value.push({url: store.getters.imageUrl + res.data.avatar})
      editForm.value.password = '';
    })
  } else {
    editForm.value = {}
    pics.value = [];
  }
}
const resetForm = () => {
  editForm.value = {};
  pics.value = [];
}
defineExpose({init,resetForm})

const updatePicsHandler = (imageUrl) => {
  editForm.value.avatar = imageUrl;
  console.log(imageUrl)
}
const deletePicsHandler = () => {
  editForm.value.avatar = '';
};

const ruleForm = ref()
const submitForm = () => {
  ruleForm.value.validate((valid) => {
    if (valid) {
      console.log(editForm.value)
      if(editForm.value.id){
        Update(editForm.value).then((res) => {
          ElMessage({message: '更新成功', type: 'success'})
          closeDialog(true)
        })
      } else {
        Insert(editForm.value).then((res) => {
          ElMessage({message: '新增成功', type: 'success'})
          closeDialog(true)
        })
      }
    }
  })
}

const rules = reactive({
  name: [
    {required: true, message: '请输入管理员名称', trigger: 'blur'}
  ],
  username: [
    {required: true, message: '请输入管理员账号', trigger: 'blur'}
  ]
})
</script>

<template>
  <!--新增对话框-->
  <el-drawer
      :title="title"
      width="600px"
      v-model="showDialog"
      :before-close="closeDialog"
  >
    <el-form :model="editForm" :rules="rules" ref="ruleForm" label-width="100px"
             class="demo-editForm">
      <el-input v-model="editForm.id" autocomplete="off" type="hidden"></el-input>
      <el-form-item label="管理员名称" prop="name" label-width="100px">
        <el-input v-model="editForm.name" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="管理员账号" prop="username" label-width="100px">
        <el-input v-model="editForm.username" autocomplete="off"></el-input>
        <el-alert
            v-if="title !== '编辑'"
            title="不填密码则初始密码为888888"
            :closable="false"
            type="info"
            style="line-height: 12px;"
        ></el-alert>
      </el-form-item>
      <el-form-item label="密码" prop="password" label-width="100px">
        <el-input v-model="editForm.password" autocomplete="off" type="password"></el-input>
        <el-alert
            v-if="title === '编辑'"
            title="不填密码则表示不修改密码"
            :closable="false"
            type="info"
            style="line-height: 12px;"
        ></el-alert>
      </el-form-item>
      <el-form-item label="头像" prop="avatar" label-width="100px">
        <Upload :pics="pics" :limit="1" @updatePics="updatePicsHandler"  @deletePics="deletePicsHandler"></Upload>
      </el-form-item>
      <el-form-item label="联系方式" prop="contact" label-width="100px">
        <el-input v-model="editForm.contact" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="管理员等级" prop="role" label-width="100px">
        <el-select v-model="editForm.role">
          <el-option label="超级管理员" :value="0"></el-option>
          <el-option label="普通管理员" :value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">立即{{ title }}</el-button>
        <el-button @click="closeDialog">关闭</el-button>
      </el-form-item>
    </el-form>
  </el-drawer>
</template>

<style lang="scss" scoped>
.avatar-uploader .avatar {
  width: 50px;
  height: 50px;
  display: block;
}

.el-icon.avatar-uploader-icon {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;

  width: 50px;
  height: 50px;
  text-align: center;
  background-color: var(--el-fill-color-lighter);
}
</style>